<template>
	<div>
		<el-form :inline="true" style="padding-top: 10px;padding-left: 5px;">
			<el-form-item label="查询条件" prop="parameter" label-width="80px">
				<el-input v-model="parameter" style="width: 200px;" placeholder="请输入客户编码/客户名称"></el-input>
			</el-form-item>
			<el-form-item>
				<div style="float: left;">
					<el-button type="primary" @click="querybutton">查询</el-button>
				</div>
			</el-form-item>
			<el-form-item>
				<div style="float: left;margin-left: -10px;">
					<el-button type="primary" @click="adduserbutton">新增客户</el-button>
				</div>
			</el-form-item>
		</el-form>
		<el-table :data="userData" showOverflowTooltip style="width: 100%" stripe border tooltip-effect="dark" :max-height="tabHeight">
			<!--<el-table-column type="selection" width="50" > </el-table-column>-->
			<el-table-column prop="user_id" label="客户编码" show-overflow-tooltip></el-table-column>
			<el-table-column prop="user_name" label="客户名称" show-overflow-tooltip></el-table-column>
			<el-table-column label="性别" show-overflow-tooltip>
				 <template slot-scope="scope">
				  {{scope.row.sex == 1 ? '男' : '女'}}
				</template>
			</el-table-column>
			<el-table-column prop="tel" label="手机" show-overflow-tooltip></el-table-column>
			<el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
			<el-table-column prop="create_time" label="创建时间" show-overflow-tooltip></el-table-column>
			<el-table-column label="操作" width="160">
				<template slot-scope="scope">
					<el-button size="small" type="primary" @click="showServerEdit(scope.$index,scope.row)">编辑</el-button>
					<el-button size="small" type="primary" @click="delServerEdit(scope.$index,scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog :title="text" :visible.sync="dialogUpdate" width="40%">
			<el-form :model="form" :rules="formRules" label-width="120px">
				<el-form-item label="客户编码：" prop="user_id">
					<el-input :disabled="iseditor" v-model="form.user_id"></el-input>
				</el-form-item>
				<el-form-item label="客户名称：" prop="user_name">
					<el-input v-model="form.user_name"></el-input>
				</el-form-item>
				<el-form-item label="性别：" prop="sex">
					<el-radio-group v-model="form.sex">
						<el-radio label="1">男</el-radio>
						<el-radio label="2">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="手机：" prop="tel">
					<el-input v-model="form.tel" :maxlength="11" @change="checkNo(form.tel)" type = "text" onkeypress="return event.keyCode>=48&&event.keyCode<=57"></el-input>
				</el-form-item>
				<el-form-item label="密码：" prop="password">
					<el-input v-model="form.password" type="password"></el-input>
				</el-form-item>
				<el-form-item label="地址：" prop="address">
					<el-input v-model="form.address"></el-input>
				</el-form-item>
				<el-form-item label="用户类型" prop="u_type">
					<el-select clearable v-model="form.u_type" placeholder="请选择" style="width: 120px;">
						<el-option v-for="item in u_typedata" :key="item.u_type" :label="item.u_type" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogUpdate = false">取 消</el-button>
				<el-button type="primary" @click="updateButton">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		selectalluser,
		selectuserbyid,
		deleteuser,
		updateuser,
		createuser
	} from '../../api/user.js'
	export default {
		data() {
			return {
				userData: [],
				parameter: '',
				form: {
					user_id: '',
					user_name: '',
					sex: '',
					tel: '',
					password: '',
					address: '',
					u_type:'2'
				},
				formRules:{
					user_id: [
					    { required: true, message: '请输入客户', trigger: 'change' },
				    ],
				    user_name: [
					     { required: true, message: '请输入用户名', trigger: 'change' },
				    ],
					sex:[
				        { required: true, message: '请选择性别', trigger: 'change' },
				    ],
				    tel:[
				        { required: true, message: '请输入联系方式', trigger: 'change' },
				    ],
					password:[
					    { required: true, message: '请输入密码', trigger: 'change' },
					],
				    address:[
				    	 { required: true, message: '请输入地址', trigger: 'change' }
				    ]
				},
				dialogUpdate: false,
				iseditor:true,
				text: '',
				tabHeight:500,
				u_typedata:[
					{u_type:'经理',value:'1'},
					{u_type:'客户',value:'2'},
					{u_type:'仓库管理员',value:'3'},
					{u_type:'业务员',value:'4'},
					{u_type:'财务',value:'5'},
				]
			};
		},
		methods: {
			checkNo(value){
				let reg = /^[1-9]\d*$/;
				if (value) {
					if ( new RegExp(reg).test(value) == false) {
						setTimeout(() => {
							this.form.tel ='';
				         }, 500);
					}
				}
			},
			querybutton() {
				if (this.parameter == '') {
					this.get_userList();
				} else {
					this.userData = [];
					selectuserbyid({
						parameter: this.parameter
					}).then(response => {
						// console.log(this.parameter, 'this.parameter');
						this.userData = response;
					})
				}
			},
			updateButton() {
				if(this.text == '新增客户'){
					if(this.form.user_id == '' || this.form.user_name == '' || this.form.sex == '' || this.form.tel == '' || this.form.password == '' || this.form.address == ''){
						this.$notify({
						  title: '警告',
						  message: '请填写完整信息',
						  type: 'info',
						})
						return ;
					}
					for(let i=0;i<this.userData.length;i++){
						if(this.form.user_id == this.userData[i].user_id){
							 this.$notify({
								  title: '警告',
								  message: '用户id已存在',
								  type: 'info',
								})
								return ;
						}
					}
					console.log()
					createuser(this.form).then(() => {
					  this.$notify({
					    title: '成功',
					    message: '创建成功',
					    type: 'success',
					    duration: 2000
					  })
					  this.get_userList();
					})
				}else{
					// console.log(this.form,'this.form')
					updateuser(this.form).then(() => {
					  this.$notify({
					    title: '成功',
					    message: '更新成功',
					    type: 'success',
					    duration: 2000
					  })
					  this.get_userList();
					})
				}
				
				this.dialogUpdate = false;
			},
			get_userList() {
				this.userData = [];
				selectalluser().then(response => {
					// console.log(response, 'response22');
					this.userData = response;
				})
			},
			adduserbutton() {
				this.dialogUpdate = true;
				this.iseditor = false;
				this.text = '新增客户';
				this.form.user_id = '';
				this.form.user_name = '';
				this.form.sex = '';
				this.form.tel = '';
				this.form.password = '';
				this.form.address = '';
			},
			showServerEdit(index, row) {
				this.dialogUpdate = true;
				this.iseditor = true;
				this.text = '编辑';
				this.form.user_id = row.user_id;
				this.form.user_name = row.user_name;
				this.form.sex = row.sex;
				this.form.tel = row.tel;
				this.form.password = row.password;
				this.form.address = row.address;
				// this.selectRow=row;
			},
			delServerEdit(index, indexPath) {
				this.$confirm('是否确定删除' + indexPath.user_name + '用户?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					// console.log(indexPath.ckey,'indexPath.ckey');
					deleteuser({
						user_id: indexPath.user_id
					}).then(() => {
						this.$notify({
							title: '成功',
							message: '删除成功',
							type: 'success'
						})
						this.get_userList();
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},

		},
		created() {
			this.tabHeight = document.documentElement.scrollHeight - 160 || document.body.scrollHeight -160;
			this.get_userList();
		}
	}
</script>

<style>

</style>
